<template>
  <div>
    <!-- 搜索框 -->
    <el-card class="box-card">
      <div class="top">
        <div>
          <el-icon>
            <Search />
          </el-icon>
          <span>筛选搜索</span>
        </div>
        <div>
          <el-button>重置</el-button>
          <el-button type="primary" @click="searchfn">查询搜索</el-button>
        </div>
      </div>
      <div class="bottom">
        <span>输入搜索: </span>
        <input v-model="txt" type="text" placeholder="品牌名称/关键字" />
      </div>

    </el-card>
  </div>
</template>

<script setup lang="ts">
import EventBus from "@/utils";
import { ref } from "vue";

const isSeartitle1 = ref(false);
const props = defineProps<{
  seartitle?: string;
  seartitle1?: string;
  isSeartitle1?: boolean;
}>();

const txt = ref("");
function searchfn() {
  EventBus.emit("search", txt.value);

}
</script>

<style scoped>
:deep(.el-card__body) {
  padding-bottom: 0;
}

.box-card {
  width: 99%;
  margin: 10px 0;
  /* height: 128px; */
  font-size: 14px;
}

.box-card .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card .top span {
  margin: 0 8px;
}

.box-card .bottom {
  margin: 20px;
  color: gray;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.box-card .bottom div {
  width: 350px;
  margin-bottom: 20px;
}

.box-card .bottom span {
  margin-right: 30px;
}

.box-card .bottom input {
  border: 1px solid rgb(218, 216, 216);
  height: 40px;
  border-radius: 5px;
  padding-left: 5px;
  color: rgb(201, 191, 191);
  font-size: 12px;
  outline-color: rgb(179, 175, 175);
  width: 210px
}

.box-card .seartitle2 {
  display: inline-block;
  margin-left: 50px;
}
</style>
